<template>
  <div class="page-mobile-comment-list">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      title="评价列表"
    ></white-header>
    <div class="comment_info">好评度{{ commentCount.goodPercentage }}%</div>
    <div class="comment_classify">
      <div
        :class="['rate_btn', comment_rank == '0' ? 'rate_active' : '']"
        @click="toggleRate('0')"
      >
        全部({{ commentCount.allRate }})
      </div>
      <div
        :class="['rate_btn', comment_rank == '1' ? 'rate_active' : '']"
        @click="toggleRate('1')"
      >
        好评({{ commentCount.goodRate }})
      </div>
      <div
        :class="['rate_btn', comment_rank == '2' ? 'rate_active' : '']"
        @click="toggleRate('2')"
      >
        中评({{ commentCount.mediumRate }})
      </div>
      <div
        :class="['rate_btn', comment_rank == '3' ? 'rate_active' : '']"
        @click="toggleRate('3')"
      >
        差评({{ commentCount.badRate }})
      </div>
    </div>
    <ul class="comment_list">
      <li
        class="comment_item"
        v-for="(item, index) in commentList"
        :key="item.id"
      >
        <div class="comment_user">
          <img :src="item.avatar ? item.avatar : '/img/mobile/user_nav_head.png'" class="comment_avatar" alt="" />
          <div>
            <p class="comment_username">{{item.acName}}</p>
            <p class="comment_rate">
              <van-rate :value="item.rate" readonly size="14px" />
            </p>
          </div>
          <van-tag class="top_tag" plain type="primary" v-if="item.isTop">置顶</van-tag>
        </div>
        <div class="comment_content">
          <div class="comment_text">
            <p v-if="item.content">{{item.content}}</p>
            <p v-else>{{item.rate | formatRate}}</p>
          </div>
          <p class="comment_time">{{formatDate(item.createTime)}}</p>
        </div>
        <div class="comment_reply" v-if="item.reply">
          <p>老师回复：{{item.reply}}</p>
        </div>
      </li>
    </ul>
    <div class="footer" v-show="commentList.length != 0">
      <span class="tips">我是有底线的</span>
    </div>
    <van-empty description="暂时没有评价哟~" v-show="commentList.length == 0" />
  </div>
</template>

<script>
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { getCourseCommentList, getCommentCount } from "~/api/course";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  scrollToTop: true,
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: {
    WhiteHeader
  },
  data() {
    return {
      that: this,
      comment_rank: "0",
      commentList: [], //评论列表
      commentCount: {},
      commentPages: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_loading(state) {
        return state.is_loading;
      }
    }),
    courseId() {
      return this.$route.query.courseId;
    }
  },
  watch: {},
  filters:{
    formatRate(val){
      switch (val) {
        case 1:
          return "差评！课程太差了，我要吐槽！";
        case 2:
          return "勉强中评！课程不满意";
        case 3:
          return "中评！课程一般";
        case 4:
          return "好评！课程还不错，继续保持！";
        case 5:
          return "五星好评！课程非常棒，点赞！";
        default:
          return "";
      }
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.eventListener);
    this.setDisabled(true);
  },
  deactivated() {
    window.removeEventListener("scroll", this.eventListener);
    this.setDisabled(true);
  },
  activated() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
    this.initPage();
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initPage();
      this.setLoading(false);
    });
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    toggleRate(val) {
      this.comment_rank = val;
      this.commentPages.page = 1;
      this.getCommentList();
    },
    formatDate(date) {
      var date = new Date(date);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD;
      //   return YY + MM + DD + " " + hh + mm + ss;
    },
    initPage() {
      this.commentPages.page = 1;
      this.getCommentList();
      this.getCommentCount();
    },
    // 获取课程评价统计数据
    async getCommentCount() {
      this.SET_IS_LOADING(true);
      let params = {
        courseId: this.courseId
      };
      let result = await getCommentCount(params);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        this.commentCount = {
          ...data,
          goodPercentage: data.allRate == 0 ? 100 : data.goodPercentage
        };
      } else {
      }
      this.SET_IS_LOADING(false);
    },
    async getCommentList(type) {
      this.SET_IS_LOADING(true);
      let params = {
        courseId: this.courseId,
        offset: (this.commentPages.page - 1) * this.commentPages.pageSize,
        limit: this.commentPages.pageSize,
        sort: "id desc",
        rateType: this.comment_rank
      };
      let result = await getCourseCommentList(params);
      if (result && result.data && result.data.code == 200) {
        let data = result.data.data.rows.map(item => {
          return {
            ...item,
            acName: item.acName ? item.acName.substr(0, 1) + "****" : "无****"
          };
        });
        if (type == "pullup") {
          this.commentList = [...this.commentList, ...data];
        } else {
          this.commentList = data;
        }
        this.commentPages.total = result.data.data.total;
      } else {
        this.$toast("获取失败！");
      }
      this.SET_IS_LOADING(false);
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        console.log("上拉加载");
        if (this.commentPages.total <= this.commentList.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.commentPages.page++;
        this.getCommentList("pullup");
      }
    },
    eventListener() {
      this.throttle(this.pullUp, 30);
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function() {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    }
  },
  created() {},
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-mobile-comment-list {
  width: 100vw;
  min-height: 100vh;
  background-color: #ffffff;
  padding: 0 0.288rem;
  box-sizing: border-box;
  .comment_info {
    font-size: 0.288rem;
    padding: 0.2rem 0;
  }
  .comment_classify {
    display: flex;
    flex-wrap: wrap;
    .rate_btn {
      padding: 0.1rem;
      font-size: 0.288rem;
      border: 1px solid var(--theme-color);
      color: var(--theme-color);
      border-radius: 0.1rem;
      margin-right: 0.2rem;
      margin-bottom: 0.2rem;
      &.rate_active {
        background: var(--theme-color);
        color: #ffffff;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .comment_list {
    margin-top: 0.2rem;
    .comment_item {
      border-bottom: 1px solid #ececec;
      padding: 0.2rem 0;
      &:last-child {
        border-bottom: 0;
      }
      .comment_user {
        display: flex;
        margin-bottom: 0.1536rem;
        position: relative;
        .top_tag{
          position: absolute;
          right: 0;
          top: 0;
        }
        .comment_avatar {
          display: block;
          width: 0.61rem;
          height: 0.61rem;
          margin-right: 0.2rem;
          overflow: hidden;
          background: var(--theme-color);
          border-radius: 50%;
        }
        .comment_username {
          margin-bottom: 0.03rem;
          color: #000;
        }
        // .comment_rate{}
      }
      .comment_content {
        font-size: 0.2688rem;
        line-height: 0.384rem;
        .comment_text {
          word-break: break-word;
          word-wrap: break-word;
          overflow: hidden;
          color: #000;
        }
        .comment_time {
          margin-top: 0.1536rem;
          color: #777;
        }
      }
      .comment_reply {
        padding: 0.1rem;
        word-break: break-word;
        word-wrap: break-word;
        overflow: hidden;
        color: #777;
        background-color: #eee;
        margin-top: 0.1rem;
        font-size: 0.2688rem;
        border-radius: 0.05rem;
      }
    }
  }
  .comment_empty {
    color: #000;
    font-size: 0.2688rem;
    line-height: 0.384rem;
  }
  .footer {
    padding: 0.3rem;
    font-size: 0.26rem;
    color: #babec2;
    text-align: center;
    .tips {
      position: relative;
    }
    .tips::before {
      content: "";
      display: block;
      position: absolute;
      left: -1.7rem;
      top: 50%;
      transform: translateY(-1px);
      width: 1.5rem;
      height: 1px;
      background: #babec2;
    }
    .tips::after {
      content: "";
      display: block;
      position: absolute;
      right: -1.7rem;
      top: 50%;
      width: 1.5rem;
      transform: translateY(-1px);
      height: 1px;
      background: #babec2;
    }
  }
}
</style>
<style lang="scss">
.page-mobile-comment-list {
}
</style>
